<template>
  <div
    class="apply-connect overflow-y-auto scrollbar-hide flex flex-col"
    v-loading.fullscreen.lock="loading"
  >
    <div class="header">
      <div class="steps-container">
        <Steps
          :activeStep="productStore.productMarketStep"
          :steps="productStore.productMarketStepData"

        />
        <!--       -->
      </div>
      <div class="apply-container">
        <div class="content flex-1">
          <div v-show="productStore.productMarketStep === 0">
            <content-one :oneInfo="oneInfo" />
          </div>

          <div v-show="productStore.productMarketStep === 1">
            <content-two :twoInfo="twoInfo" />
          </div>
          <div v-show="productStore.productMarketStep === 2">
            <content-three :threeInfo="threeInfo" />
          </div>
          <div v-show="productStore.productMarketStep === 3">
            <content-four   ref="contentOneRef" />
          </div>
        </div>
        <!-- <Content :oneInfo="oneInfo" :activeStep="productStore.productMarketStep" /> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { directAxios } from "@/axios/index";
import { onMounted, onBeforeUnmount,  ref } from "vue";
import Steps from "./Steps.vue";
import { useDeviceTreeStore } from "@/store/modules/deviceTreeStore";
import { useProductStore } from "@/store/modules/task";
import ContentOne from "./contentOne.vue";
import ContentTwo from "./contentTwo.vue";
import ContentThree from "./contentThree.vue";
import ContentFour from "./contentFour.vue";
const deviceTreeStore = useDeviceTreeStore();
const productStore = useProductStore();
const props = defineProps({
  stepsNum: {
    type: Number,
    default: () => 0,
  },
})

// 生成路由配置loading
const loading = ref(false);
// 添加ref引用孙组件
const contentOneRef = ref();

// 提供获取孙组件数据的方法
const getFormData = async () => {
  if (contentOneRef.value) {
    return await contentOneRef.value.getFormData();
  }
  return null;
};
// 点击step步骤
const oneInfo = ref();
const getOneData = async () => {
const paramsObj = {
  missionCode: deviceTreeStore.taskInfo?.missionCode,
}
  const res = await  directAxios.post(
    "/api/mission/normalizeComManufacturerName",
    paramsObj,
    {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      transformRequest: [(data) => data.toString()],
    }
  );
  if (res.code == 200) {
    oneInfo.value = res.msg;
  }
};
const twoInfo = ref([]);
const getTwoData = async () => {
  const paramsObj = {
  missionCode: deviceTreeStore.taskInfo?.missionCode,
}
  const res = await  directAxios.post(
    "/api/mission/verifyPreferred",
    paramsObj,
    {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      transformRequest: [(data) => data.toString()],
    }
  );
  if (res.code == 200) {
    twoInfo.value = res.data;
  }
};
const threeInfo = ref([]);
const getThreeData = async () => {
 const paramsObj = {
  missionCode: deviceTreeStore.taskInfo?.missionCode,
}
  const res = await  directAxios.post(
    "/api/mission/verifyWkb",
    paramsObj,
    {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      transformRequest: [(data) => data.toString()],
    }
  );
  if (res.code == 200) {
    threeInfo.value = res.data;

  }

};

watchEffect(() => {

  if(props.stepsNum==1){
    productStore.setProductMarketStep(props.stepsNum);
    getTwoData();
  }else if(props.stepsNum==2){
    productStore.setProductMarketStep(props.stepsNum);
    getThreeData();
  }else if(props.stepsNum==3){
    productStore.setProductMarketStep(props.stepsNum);
  }

  // productStore.setProductMarketStep(props.stepsNum);
})
/**
 * 监听任务信息变化
 */
// watch(
//   () => deviceTreeStore.taskInfo,
//   (newTaskInfo) => {
//     if (newTaskInfo) {
//     }
//   }
// );

// 暴露方法给父组件
defineExpose({
  getFormData
});
onMounted(() => {
  getOneData();
});
// 页面离开的时候初始化存储状态
onBeforeUnmount(() => {
  productStore.setProductMarketStep(0);
});
</script>

<style lang="less" scoped>
.apply-connect {
  gap: 15px;
  padding: 0 !important;

  .header {
    background-color: #fff;
    border-radius: 8px;
    // padding: 0px 30px 0px 80px;
    position: relative;

    .title {
      font-weight: 700;
      font-size: 18px;
      color: #1a1a1a;
      position: absolute;
      left: 20px;
      top: 20px;
    }

    .steps-container {
      padding-top: 40px;
    }
  }

  .apply-container {
    background-color: #fff;
    border-radius: 8px;
  }
}
</style>
